<template>
<div class="PBdiv1">
    <div class="paydiv3">
        <div class="paydiv2"></div>
        <span class="paydiv3span1" :style="PayBtnStyle"
        @click="PayBtn">立即支付</span>
        <span class="paydiv3span2" 
        v-show="!(WechatOrAli != ''&& checked == 0 || (BankCheckedLeft+BankCheckedRight != 198))">
        请选择支付方式</span>
    </div>
        <el-dialog
        title="支付提示"
        :visible.sync="dialogVisible"
        width="70%"
        :before-close="handleClose">
        <span>若您完成支付了请点击确定</span>
        <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="paysuccess">确 定</el-button>
        </span>
        </el-dialog>
</div>
</template>

<script>
import axios from 'axios'
    export default {
        name:'PxPBtn',
        data(){
            return{
                checked:99,
                BankCheckedLeft:99,
                BankCheckedRight:99,
                PayBtnStyle:'',
                ChangePayBtnStyle:{
                    'before':'background-color: rgb(206, 206, 206);color: rgb(136, 136, 136);cursor: not-allowed;',
                    'after':'color: white;background-color: rgb(228, 67, 102);cursor: default;',
                    'hover':'color: white;background-color: rgb(255, 94, 121);cursor: default;'
                },
                choosed:0,
                WechatOrAli:'',
                dialogVisible:false,
                MyOidData:0,
                axiosCartDate_cid:[],
            }
        },
        methods:{
            PayBtn(){
                if( this.checked == 0 && this.WechatOrAli != '' || this.BankCheckedLeft != 99 || this.BankCheckedRight != 99){
                    if(!this.choosed){
                        this.choosed=!this.choosed
                        this.PayBtnStyle=this.ChangePayBtnStyle.hover
                        if(this.WechatOrAli =='wechat'){
                            console.log('wechat!!!');
                        }else if(this.WechatOrAli =='ali'){
                            this.$addr.get(`alipay/${this.MyOidData}/pay_wap`).then(
                                response=>{
                                    console.log('查看是否支付的请求成功了',response)
                                    if(response.data.state == 4005){
                                        this.$message({
                                        message: response.data.message,
                                        type: 'error'
                                        });
                                    }else if(response.data.state == 4009){
                                        this.$message({
                                        message: response.data.message,
                                        type: 'error'
                                        });
                                    }else{
                                        console.log('ali!!!');
                                        this.dialogVisible=true
                                        // window.open(`http://localhost:8080/alipay/${this.MyOidData}/pay_page`)
                                        window.open(`https://www.haiggood.com/alipay/${this.MyOidData}/pay_wap`)
                                    }
                                },
                                error=>{
                                    console.log('查看是否支付的请求失败了',error.message)
                                }
                            )
                        }
                    }else{
                        // console.log('PayBtn!');
                        this.choosed=!this.choosed
                        this.PayBtnStyle=this.ChangePayBtnStyle.after
                    }
                }
            },
            handleClose(done) {
                this.$confirm('确认关闭？')
                .then(_ => {
                    done();
                })
                .catch(_ => {});
            },
            paysuccess(){
                this.$addr.get(`alipay/${this.MyOidData}/query`).then(
                    response=>{
                        console.log('查看是否支付的请求成功了',response)
                        if(response.data.state == 4005){
                            this.$message({
                            message: response.data.message,
                            type: 'error'
                            });
                        }else if(response.data.state == 4009){
                            this.$message({
                            message: response.data.message,
                            type: 'error'
                            });
                        }else if(response.data.code == '40004'){
                            this.$message({
                            message: response.data.subMsg,
                            type: 'error'
                            });
                        }else{
                            this.$addr.get(`carts`).then(
                                response=>{
                                    console.log('请求获取该用户购物车信息成功了',response)
                                    for( let i=0,j=0; i<response.data.data.length; i++){
                                        if(response.data.data[i].pid.toString().indexOf('20000') != -1){
                                            this.axiosCartDate_cid[j]=response.data.data[i].cid
                                            j++
                                        }
                                    }
                                    for(let i=0 ; i<this.axiosCartDate_cid.length; i++){
                                        this.$addr.get(`carts/${this.axiosCartDate_cid[i]}/delete`).then(
                                            response=>{
                                                console.log('请求清空购物车成功了',response)
                                                    this.dialogVisible = false
                                                    console.log('ali!!!paysuccess');
                                                    this.$router.push({
                                                        name:'PxOrderDetails',
                                                        params:{oid:this.MyOidData}})
                                                },
                                            error=>{
                                                console.log('请求清空购物车失败了',error.message)
                                            })
                                    }
                                },
                                error=>{
                                    console.log('请求获取该用户购物车信息商品详情失败了',error.message)
                                }
                            )
                        }
                    },
                    error=>{
                        console.log('查看是否支付的请求失败了',error.message)
                    }
                )
            },
        },
        mounted(){
            // console.log(this.BankCheckedLeft+this.BankCheckedRight,'$%^^^');
            this.$bus.$on('TwoWayChecked',(TwoWayChecked)=>{
                this.checked=TwoWayChecked
               if( this.WechatOrAli != '' && this.checked ==0){
                    this.PayBtnStyle=this.ChangePayBtnStyle.after
                }else if(this.WechatOrAli == '' && this.checked ==1){
                    if(this.BankCheckedLeft+this.BankCheckedRight == 198){
                        this.PayBtnStyle=this.ChangePayBtnStyle.before
                    }
                }
            })
            this.$bus.$on('BankChecked',(leftindex,rightinden)=>{
                this.BankCheckedLeft=leftindex
                this.BankCheckedRight=rightinden
                if( leftindex + rightinden != 198){
                    this.PayBtnStyle=this.ChangePayBtnStyle.after
                }else{
                    this.PayBtnStyle=this.ChangePayBtnStyle.before
                }
            })
            this.$bus.$on('WechatOrAli',(WechatOrAli)=>{
                this.WechatOrAli=WechatOrAli
               if( this.WechatOrAli != '' && this.checked ==0){
                    this.PayBtnStyle=this.ChangePayBtnStyle.after
                }else if(this.WechatOrAli == '' && this.checked ==1){
                    if(this.BankCheckedLeft+this.BankCheckedRight == 198){
                        this.PayBtnStyle=this.ChangePayBtnStyle.before
                    }
                }
            })
            this.$bus.$on('MyOidData',(MyOidData)=>{
                this.MyOidData=MyOidData
            })
        },
        beforeDestroy(){
            this.$bus.$off('TwoWayChecked')
            this.$bus.$off('BankChecked')
            this.$bus.$off('WechatOrAli')
            this.$bus.$off('MyOidData')
        }
    }
</script>

<style scoped>
.paydiv2{
    height: 3px;
    background-color: rgb(184, 184, 184);
    border: 1px;
}
.paydiv3{
    background-color: rgb(255, 255, 255);
    height: 80px;
    margin-top: 50px;
}
.paydiv3span1{
    width: 80px;
    position: absolute;
    margin-top: 10px;
    padding: 13px;
    padding-left: 40px;
    padding-right: 40px;
    border-radius: 4px;
    font-size: 18px;
    /* 以下样式发生改变 */
    background-color: rgb(206, 206, 206);
    color: rgb(136, 136, 136);
    cursor: not-allowed;
}
.paydiv3span2{
    width: 100px;
    margin-left: 170px;
    margin-top: 28px;
    position: absolute;
    color: red;
    font-size: 12px;
}
</style>